<template>
  <div class="container">
    <el-card>
      <div style="font-size: 20px;display: flex;justify-content: space-evenly;align-items: center">
       <div style="font-size: 30px">
         <div>欢迎您</div>
         <div style="font-size: 40px;font-weight:bold;margin-top: 40px">{{userName}}</div>
       </div>
        <div style="height: 400px;width: 1px;border:1px solid #EBEEF5"></div>
        <div>
          <div style="font-size: 50px">{{time}}</div>
          <div style="margin-top: 40px;font-weight: bold">{{date}}</div>
          <div style="margin-top: 30px;">{{lunar}}</div>
        </div>
      </div>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span style="display: flex">状态</span>
      </div>
      <div style="display: flex;justify-content: space-around;align-items:center;font-size: 18px">
        <div>
          <div>档案状态</div>
          <div style="margin-top: 20px;font-size: 26px;font-weight: bold">已归档</div>
        </div>
        <div style="height: 100px;width: 1px;border:1px solid #EBEEF5"></div>
        <div>
          <div>我的转科</div>
          <div style="margin-top: 20px;font-size: 26px;font-weight: bold">0</div>
        </div>
        <div style="height: 100px;width: 1px;border:1px solid #EBEEF5"></div>
        <div>
          <div>我的调科</div>
          <div style="margin-top: 20px;font-size: 26px;font-weight: bold">0</div>
        </div>
        <div style="height: 100px;width: 1px;border:1px solid #EBEEF5"></div>
        <div>
          <div>我的消息</div>
          <div style="margin-top: 20px;font-size: 26px;font-weight: bold">0</div>
        </div>
      </div>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span style="display: flex">概览</span>
      </div>
      <div style="display: flex;justify-content: space-around;align-items:center;font-size: 18px">
        <div>
          <div>待审核</div>
          <div style="margin-top: 20px;font-size: 26px;font-weight: bold">0</div>
        </div>
        <div style="height: 100px;width: 1px;border:1px solid #EBEEF5"></div>
        <div>
          <div>待归档</div>
          <div style="margin-top: 20px;font-size: 26px;font-weight: bold">0</div>
        </div>
        <div style="height: 100px;width: 1px;border:1px solid #EBEEF5"></div>
        <div>
          <div>待考评</div>
          <div style="margin-top: 20px;font-size: 26px;font-weight: bold">0</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getLunar } from 'chinese-lunar-calendar'
export default {
  name: "Welcome",
  data(){
    return{
      Year: new Date().getFullYear(),
      Month: new Date().getMonth() + 1,
      Date: new Date().getDate(),
      userName:"",
      time:"",
      date:"",
      lunar:"",
    }
  },
  methods:{
    getNowTime(){
      this.time = `${new Date().getHours()}:${new Date().getMinutes()>9?new Date().getMinutes():'0'+new Date().getMinutes()}:${new Date().getSeconds()>9?new Date().getSeconds():'0'+new Date().getSeconds()}`
    },
    getTime(){
      let that=this
      setInterval(function(){
        that.getNowTime()
      }, 1000);
    },
    getDate(){
      var weekDay = ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
      this.date = `${new Date().getMonth()+1}月${new Date().getDate()}日  ${weekDay[new Date().getDay()-1]}`
    },
    getLunarDate(){
      let data = getLunar(this.Year, this.Month, this.Date)
      this.lunar = data.lunarYear+data.dateStr+"  "+data.solarTerm
    }
  },
  mounted() {
    this.getTime()
    this.getDate()
    this.getLunarDate()
    this.userName=window.localStorage.dept+" - "+window.localStorage.name
  }
}
</script>

<style scoped>
.container{
  width: 100%;
  /*height: 100%;*/
  /*display: flex;*/
  /*flex-direction: column;*/
  /*justify-content: space-around;*/
}
.el-card{
  margin-bottom: 20px;
}
</style>
